<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字识别</title>
	<link rel="stylesheet" type="text/css" href="css/ai-style.css">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="js/layer/layer.js"></script>
</head>
<body>
	<header></header>
	<div class="main">
		<div class="left">
			<ul>
				<li><img src="images/yuyinhc.svg"><a href="yuyinhc.html">语音合成</a></li>
				<li><img src="images/yuyinsb.svg"><a href="yuyinsb.html">语音识别</a></li>
				<li><img src="images/wenzi.svg"><a href="wenzi.html">文字识别</a></li>
				<li class="active"><img src="images/renlian_active.svg"><a href="renlian.html">人脸识别</a></li>
				<li><img src="images/tuxiang.svg"><a href="tuxiang.html">图像识别</a></li>
			</ul>
		</div>
		<div class="right">
			<p>了解人脸识别</p>
			<p>基于深度学习的人脸识别方案，准确识别图片中的人脸信息，提供人脸属性识别、关键点定位、人脸1：1比对、人脸1：N识别、活体检测等能力</p>
			<div class="yuyin-box wenzi">
				<div class="clearfix">
					<div class="pic-left">
						<div class="pic-left-box2">
							<img src="images/demo1.jpg">
						</div>
					</div>
					<div class="result-right">
						<dl>
							<dt>响应 <img src="images/jiantou.svg"></dt>
							<dd>
								<pre class="result-json"></pre>
							</dd>
						</dl>
					</div>
				</div>
				<div class="wenzi-foot">
					<div class="pic-form clearfix">
						<form class="form-submit">
							<!-- <input type="text" name="picurl" placeholder="请输入网络图片URL"/>
							<button type="submit" class="jiance">检测</button>
							<span>或</span> -->
							<button type="button" class="pic-upload">本地上传</button>
							<button type="button" class="jiance">检测</button>
							<input type="file" name="file" class="file-input"/>
						</form>
					</div>
					<p>图片类型支持PNG、JPG、BMP，图片大小不超过4M，长边不大于4096像素，请保证识别部分为图片主题部分</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	$('.pic-upload').click(function(){
		$('.file-input').click();
	});
	// 远程请求
	$('.jiance').click(function(){ 
		var pic = $('.file-input').val();
		if(pic==''){
			layer.alert('请上传本地文件',{title:'温馨提示',icon:2});
			return;
		}
		var index = layer.load(0, {shade: 0.7});
		var formData = new FormData($('.form-submit')[0]);
		$.ajax({
	    	url:"http://101.37.159.34:8000/getface",    //请求的url地址
		    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
			processData: false,
            contentType: false,
		    data:formData,  //参数值
		    type:"POST",   //请求方式
			dataType:'json',
		    beforeSend:function(){
		        //请求前的处理
		    },
		    success:function(res){
				layer.close(index);
		        //请求成功时处理
				if(res.error_code==0){
				 	var imgW= $('.pic-left-box2 img').get(0).naturalWidth; // 图片原始宽度
					var imgH = $('.pic-left-box2 img').get(0).naturalHeight; // 图片原始高度
					var new_imgW = 	$('.pic-left-box2 img').get(0).width; // 图片当前宽度
					var new_imgH = 	$('.pic-left-box2 img').get(0).height; // 图片当前高度
					var scaleW = new_imgW/imgW; // 宽度缩放比例
					var scaleH = new_imgH/imgH; // 高度缩放比例
					var imgboxW = $('.pic-left').get(0).offsetWidth;
					var extraW = (imgboxW-new_imgW)/2;
					for(var i=0;i<res.result.face_list.length;i++){
						// 识别框渲染
						$('.pic-left-box2').append('<div style="position: absolute;border:2px solid blue; left:'+(res.result.face_list[i].location.left*scaleW+extraW)+'px;top:'+(res.result.face_list[i].location.top*scaleH)+'px;transform:rotate('+(res.result.face_list[i].location.rotation)+'deg);width:'+(res.result.face_list[i].location.width*scaleW)+'px;height:'+(res.result.face_list[i].location.height*scaleH)+'px;"></div>');
					}
				}
				$('.result-json').text(JSON.stringify(res,null, 2));
		    },
		    complete:function(){
		        //请求完成的处理
		    },
		    error:function(){
				layer.close(index);
		        //请求出错处理
		    }
		});
	});
	$('.file-input').change(function(){
		if($(this).val()!=''){
			$('.pic-left-box2 div').remove();
			var objUrl = getObjectURL(this.files[0]);
			$('.pic-left img').attr('src',objUrl);
		}
	});
	$('.result-right dt').click(function(){
		var status = $(this).next().css('display');
		if(status=='block'){
			$(this).find('img').css('transform','none');	
		}else{
			$(this).find('img').css('transform','rotate(90deg)');
		}
		$(this).next().slideToggle("fast");
	});
	function getObjectURL(file) {
		var url = null ;
		if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
		}
		return url ;
	}
</script>